<style>
	.badgefix{
	 padding: 12px 16px;
	 font-size: 14px;
	 white-space: pre-wrap;
	 word-wrap:break-word;
	}
	.badgehe{
		background-color: #228B22;
	}
	.badgeme{
		background-color: #87CEEB;
	}
	.flowright{
		text-align:right;
	}
</style>
<div class="row">
	<div class="col-md-3"></div>
	<div class="col-md-6 col-sm-12">
		<table class="jh-table table table-striped col-md-12">
			<thead><tr><td></td></tr></thead>
			<tbody>
				<tr ng-repeat="message in vm.messages track by message.id">
				   <td ng-if="!message.me" class="row">
				   	<div class="col-md-12">{{message.createdAt| date:'medium'}}</div>
				   	<span class="col-md-3">
				   		<img class="img-circle" width="40px" height="40px" src='/content/images/avatar/1.png' />	                   	
				    	<span>{{message.fromUserName}} </span>
				   	</span>
				   	<span class="col-md-6">
				   		<span class="badge badgefix badgehe " style="white-space: normal;text-align:left;line-height: 1.5;" >{{message.content}}</span>
				  	</span>
				  	<span class="col-md-3"></span>
				   </td>
				   <td ng-if="message.me" class="pull-right row">
				   	<div class="col-md-12 flowright" >{{message.createdAt| date:'medium'}}</div>
				   	<span class="col-md-3"></span>
				   	<span class="col-md-6 ">
				   		<span  class="badge badgefix badgeme pull-right " style="white-space: normal;text-align:right;line-height:1.5;"  > @{{message.toUserName}}{{message.content}} </span>
				   	</span>
				   	<span class="col-md-3">
				   		<img class="img-circle" width="40px" height="40px" src='/content/images/avatar/1.png' />	                   	
				    	<span >{{message.fromUserName}} </span>
				   	</span>
				   </td>
				</tr>
			</tbody>
		</table>
	</div>
</div>